<template>
    <view class="lookScore">
        <view class="line"><text></text></view>
        <view class="top">
            <view style="font-size: 32rpx;color: #333;font-weight: bold;">工单评分详情</view>
        </view>
        <view class="score_content">
            <view class="label">有效判定</view>
            <view class="msg">
                <text class="tags">
                    {{ msgData.scoreType == 1 ? '有效工单' :
                        msgData.scoreType == 2 ? '无效工单' : '无法判定' }}
                </text>
            </view>
        </view>
        <view class="score_content" v-if="msgData.scoreType == 2">
            <view class="label">无效原因</view>
            <view class="msg">
                <text class="tags" v-for="(item, index) in split(msgData.scoreFutilityDesc)" :key="index">{{ item }}</text>
            </view>
        </view>
        <view class="score_content" v-if="msgData.scoreType == 2 && split(msgData.scoreFutilityDesc).includes('其他')">
            <view class="label">其他原因</view>
            <view class="msg">{{ msgData.scoreFutilityOtherDesc }}</view>
        </view>
        <view class="score_content" v-if="msgData.scoreType == 1 || msgData.scoreType == 2">
            <view class="label">工单总评分</view>
            <view class="msg">{{ msgData.score + "分" }}</view>
        </view>
        <view class="score_content">
            <view class="label">评分备注</view>
            <view class="msg">{{ msgData.scoreRemark || '--' }}</view>
        </view>
        <view class="score_content">
            <view class="label">评分人</view>
            <view class="msg" style="display: flex;align-items: center;justify-content: space-between;">
                <view>{{ msgData.scoreUserName }}</view>
                <view style="color: #666;">{{ msgData.scoreDate }}</view>
            </view>
        </view>
        <view class="save"><button hover-class="none" @click="handleSave">关闭</button></view>
    </view>
</template>
<script>
export default {
	props: {
		msg: {
			type: Object
		}
	},
	watch: {
		msg(val) {
			if (val) {
				this.msgData = { ...val };
			}
		}
	},
	data() {
		return {
			msgData:{}
		};
	},
	methods: {
		handleSave() {
			this.$emit('handleSave', '');
		},
		split(val) {
			return val.split(',');
		}
	}
};
</script>
<style lang="scss" scoped>
.lookScore {
    background: #ffffff;
    border-radius: 8rpx;
    box-sizing: border-box;
    box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.20);
    max-height: 80vh;
    padding: 20rpx 40rpx;

    .line {
        display: flex;
        justify-content: center;

        text {
            width: 64rpx;
            height: 10rpx;
            background: #d8d8d8;
            border-radius: 6rpx;
        }
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
    }

    .score_content {
        color: #333333;
        font-size: 26rpx;
        padding-bottom: 20rpx;

        >.label {
            font-weight: bold;
        }

        >.msg {
            margin-top: 20rpx;

            .tags {
                border: 2rpx solid #0091ff;
                border-radius: 8rpx;
                color: #0091ff;
                padding: 6rpx 10rpx;
                margin-right: 10rpx;
            }
        }
    }

    .save {
        margin-top: 18rpx;
        display: flex;
        justify-content: center;

        button {
            display: flex;
            width: 670rpx;
            height: 70rpx;
            border-radius: 8rpx;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>